<template>
  <div class="panel-left-2 common-panpel">
    <div class="angle angle-left-top"></div>
    <div class="angle angle-left-bottom"></div>
    <div class="angle angle-right-top"></div>
    <div class="angle angle-right-bottom"></div>
    <!-- 关系图 -->
    <div :id="domId" :style="{ width: '100%', height: vHeight + 'px' }"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    vHeight: {
      type: Number,
      default: 0,
    },
    // div ID
    domId: {
      type: String,
      default: "",
    },
    yData1: {
        type: Array,
      default: () => [],        
    },
    yData2: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      

    };
  },
  watch: {
    yData1: {
      handler(val) {
        this.initCharts();
      },
      deep: true,
    },
  },
  methods: {
    initCharts() {
      let myChart = this.$echarts.init(document.getElementById(this.domId));
      let option = {
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [
          {
            type: "graph",
            draggable: false, // 指示节点是否可以拖动
            layout: "none", // 设置为none，在data中设置x&y值，固定点位置
            symbolSize: [100, 66], //按钮大小
            roam: false, // 是否开启鼠标缩放和平移漫游
            label: {
              normal: {
                show: true,
                position: "inside",
                textStyle: {
                  fontSize: 22,
                  fontWeight: 700,
                  color: "#eef3ff", // 字体颜色 adecff
                },
              },
            },
            data: this.yData1,
            links: this.yData2,
            lineStyle: {
              normal: {
                opacity: 1,
                width: 2,
                curveness: 0.2,
              },
            },
            animationEasingUpdate: "quinticInOut",
            animationDurationUpdate: 1500,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.initCharts();
  },
};
</script>
<style lang='scss' scoped>
</style>